<template>
  <div class="footer-bottom">
    <div class="footer-content">
      <div class="footer-text">
        <p>客服电话：13281310295（服务时间：周一至周五09:30-17:30）</p>
        <p class="footer-text1">QQ交流：609969125</p><p class="footer-text2">QQ客服: 447746820</p>
        <ul class="footer-ul">
          <li class="footer-li">相关技术 >></li>
          <li class="footer-li"><a target="_blank" href="https://cn.vuejs.org/">vue</a></li>
          <li class="footer-li"><a target="_blank" href="https://cli.vuejs.org/zh/">vue-cli</a></li>
          <li class="footer-li"><a target="_blank" href="https://vuex.vuejs.org/zh/">vuex</a></li>
          <li class="footer-li"><a target="_blank" href="https://router.vuejs.org/zh/">vue-router</a></li>
        </ul>
        <br />
        <p class="footer-text3">版权所有 &copy; 2020 宠物购 --- 宠物购物只选我们</p>
      </div>

      <div class="footer-img">
        <img src="@/image/mine.png"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'footerBottom'
}
</script>

<style lang="scss" scoped>
.footer-bottom{
  width: 100%;
  height: 200px;
  font-size: 13px;
  background: #333333;
}
  .footer-content{
    width: 1170px;
    height: 170px;
    margin: auto;
    background: #333333;
    padding-top: 30px;
    color: white;
  }
  .footer-text{
    width: 800px;
    height: 150px;
    line-height: 25px;
    float: left;
  }
  .footer-img{
    width: 140px;
    height: 140px;
    float: right;
    >img{
      width: 100%;
    }
  }
  .footer-text1, .footer-text2{
    float: left;
  }
  .footer-text2{
    margin-left: 50px;
  }
  .footer-ul{
    margin-top: 50px;
  }
  .footer-li{
    height: 30px;
    float: left;
    margin-right: 15px;
  }
  .footer-li>a{
    color: white;
    text-decoration: none;
  }
  .footer-text3{
    margin-top: 10px;
  }
</style>
